<template>
  <div class="ReceivingAddress">
    <div class="head">
      <img class="left" @click="handleToUse" src="../../img/cart/u919.svg" alt="" />
      <p>选择收货人</p>
      <img class="gg" src="../../img/cart/u1171.png" alt="" />
    </div>
    <div class="address">
      <div v-for="item in items" :key="item.id" class="addressCard">
        <div class="cardLeft">
          <div class="cardLeft-left">
            <van-checkbox @click="handleChange(item)" :value="item.checked"></van-checkbox>
          </div>
          <div class="cardLeft-right">
            <div class="top">
              <p v-text="item.username">冯某</p>
              <span class="phone" v-text="item.tel">159****6447</span>
              <van-tag
                v-if="item.default"
                plain
                :style="{
                  width: '25px',
                  height: '18px',
                  fontSize: '12px',
                  paddingLeft: '5px',
                }"
                type="warning"
                >默认</van-tag
              >
            </div>
            <div class="bottom">
              <p v-text="item.address">阿拉德大陆神之都根特</p>
            </div>
          </div>
        </div>

        <div class="cardRight">
          <img @click="handleToEdit" src="../../img/cart/u1333.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="footer">
      <van-button
        round
        @click="handleToAdd"
        icon="plus"
        color="#1abc9c"
        type="primary"
        >添加新地址</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReceivingAddress',
  data() {
    return {
      phoneData: [],
    }
  },
  computed: {
    items() {
      return this.$store.state.address.addressInfo
    },
  },
  methods: {
    handleChange(data) {
      this.$store.commit('address/chooseAddress', data)
    },
    handleToAdd() {
      this.$router.push('/add')
    },
    handleToEdit() {
      this.$router.push('/edit')
    },
    handleToUse() {
      this.$router.push('/placeorder')
    },
  },
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  p {
    margin-left: 10px;
  }
  .phone {
    margin-left: 15px;
    margin-right: 8px;
  }
}
.bottom {
  p {
    margin-left: 10px;
    color: #999 !important;
    margin-top: 8px;
    font-size: 12px !important;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  background-color: white;
  width: 375px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    width: 221px;
    height: 45px;
    font-size: 16px;
  }
}
.ReceivingAddress {
  background-color: #f9f9f9;
  height: 100%;
}
.head {
  width: 100%;
  height: 45px;
  color: #999;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .left {
    width: 20px;
    height: 45px;
    margin-left: 25px;
  }
  .gg {
    width: 375px;
    height: 5px;
    position: absolute;
    top: 87px;
  }
  p {
    font-size: 16px;
    font-weight: 900;
    line-height: 45px;
    margin-left: 100px;
  }
}
.address {
  .addressCard {
    display: flex;
    justify-content: space-between;
    width: 375px;
    height: 85px;
    background-color: white;
    margin-bottom: 10px;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    .cardLeft {
      display: flex;
      align-items: center;
      margin-left: 25px;
      p {
        font-size: 14px;
        color: #666666;
      }
      .phone {
        font-size: 14px;
        color: #666666;
      }
    }
    .cardRight {
      img {
        opacity: 0.3;
        width: 20px;
        height: 19px;
        margin-right: 20px;
        margin-top: 30px;
      }
    }
  }
}
</style>
